﻿<section class="section" id="pagination">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#pagination">Pagination</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <h4>Default</h4>
            {{> pagination-base }}

            <h4>Alt</h4>
            <div class="color-black">
                <nav>
                    <ul class="pagination theme-alt">
                        <!-- Add a disabled class to a li element to hide it -->
                        <li class="pagination-prev">
                            <a href="#" aria-label="Previous">
                                <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
                            </a>
                        </li>

                        <li><a href="#">1</a></li>

                        <li class="pagination-ellipsis"><span>&hellip;</span></li>

                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>

                        <li class="active"><a href="#">7</a></li>

                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>

                        <li class="pagination-ellipsis"><span>&hellip;</span></li>

                        <li><a href="#">15</a></li>

                        <li class="pagination-next">
                            <a href="#" aria-label="Next">
                                <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            {{#markdown}}
```xml
{{> pagination-base }}
```
            {{/markdown}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-24">
            <div class="guidance guidance-usage m-t-xs">
                {{#markdown}}
{{> pagination-guidance.md}}
                {{/markdown}}
            </div>
        </div>
    </div>
    
    <hr />
    <div class="row">
        <div class="col-xs-24">
            <h2>Pager</h2>
            <h4>Default</h4>
            {{> pagination-pager }}

            <h4>Alt</h4>
            <div class="color-black">
                <nav>
                    <ul class="pager theme-alt">
                        <li class="pager-prev">
                            <a href="#" aria-label="Previous">
                                <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
                            </a>
                        </li>
                        <li class="pager-next">
                            <a href="#" aria-label="Next">
                                <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            {{#markdown}}
```xml
{{> pagination-pager }}
```
            {{/markdown}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-24">
            <div class="guidance guidance-usage m-t-xs">
                {{#markdown}}
{{> pagination-guidance.md}}
                {{/markdown}}
            </div>
        </div>
    </div>


</section>
